<template>
  <view class="home">
    <u-image :src="prefixURL(articleInfo.image)" width="750rpx" height="477rpx" mode=""></u-image>
    <view class="u-p-24">
      <u-text :text="articleInfo.title" bold size="16" color="#333"></u-text>
      <!-- <u-text :text="articleInfo.content" margin="20rpx 0" size="14" color="#666"></u-text> -->
      <u-parse :content="articleInfo.content" class="u-m-t-20 u-m-b-20"></u-parse>
      <view class="new-user u-flex-between u-flex-y-center">
        <u-image :src="prefixURL(articleInfo.user?.avatar)" :fade="false" shape="circle" width="60rpx"
          height="60rpx"></u-image>
        <view class="u-flex-1 u-flex-y-center u-flex-between u-m-l-20">
          <u-text :text="articleInfo.user.nickname" color="#333" size="13"></u-text>
          <u-text :text="articleInfo.createtime" color="#666" size="12" align="right"></u-text>
        </view>
      </view>
      <view class="u-flex-y-center u-flex-end u-p-b-20 u-p-t-20">
        <view class="u-flex-y-center" @click="_articleLikes">
          <u-image :src="articleInfo.is_collect?'/static/images/01_45qs.png':'/static/images/01_45mjsde.png'"
            :fade="false" width="34rpx" height="34rpx"></u-image>
          <u-text :text="`(${articleInfo.likes})`" :color="articleInfo.is_collect?'#F87610': '#666C77'"
            size="13"></u-text>
        </view>
        <view class="u-m-l-36 u-flex-y-center">
          <u-image src="/static/images/01_45mj.png" :fade="false" width="34rpx" height="34rpx"></u-image>
          <u-text :text="`(${articleInfo.count_reply})`" color="#666C77" size="13"></u-text>
        </view>
      </view>
      <view class="gap u-m-b-20"></view>
      <u-text color="#333" text="推荐房源" size="14" bold> </u-text>
      <house-item :item="articleInfo.house" :imageWidth="234" imageHeight="192" v-if="articleInfo.house">
        <template #right>
          <view class="u-flex-between u-flex-column u-flex-fill">
            <view class="house-name">{{articleInfo.house.title}} </view>
            <view class="house-desc">“{{articleInfo.house.description}}”</view>
            <view class="house-info">“{{articleInfo.house.house_type_text}}”</view>
            <view class="house-price u-flex-y-center u-flex-between">
              <text>市场价：{{articleInfo.house.market_price}}万</text>
              <text>优惠价：{{articleInfo.house.price}}万</text>
            </view>
          </view>
        </template>
      </house-item>
      <u-text color="#333" text="全部评论" margin="20rpx 0" size="14" bold> </u-text>
      <comment-item :list="replyList" :id="props.id" @reply_lst="_reply_lst"></comment-item>
    </view>
  </view>
  <back-page></back-page>
</template>

<script setup>
  import { prefixURL } from '../../../util/util';
  import { onMounted, ref } from 'vue';
  import commentItem from '../components/comment-item.vue';
  import { articleDetail, articleLikes, reply_lst } from '../../../config/api';
  const props = defineProps({
    id: {
      type: [String, Number],
      default: ''
    }
  })
  const replyList = ref([])
  const articleInfo = ref({
    house: {},
    user: {}
  })
  onMounted(() => {
    _articleDetail()
    _reply_lst()
  })
  const _articleLikes = () => {
    articleLikes({ id: articleInfo.value.id }).then(res => {
      uni.$u.toast(res.msg)
      articleInfo.value.is_collect = !articleInfo.value.is_collect
      articleInfo.value.is_collect? articleInfo.value.likes++ : articleInfo.value.likes--
    })
  }
  const _reply_lst = () => {
    reply_lst({ id: props.id, page: 1, limit: 100 }).then(res => {
      console.log(res)
      replyList.value = res.data
    })
  }
  const _articleDetail = () => {
    articleDetail({ id: props.id }).then(res => {
      console.log(res)
      articleInfo.value = res.data
    })
  }
</script>

<style lang="scss" scoped>
  .home {
    min-height: 100vh;
    background: #fff;
    padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);

    ::v-deep .u-tag--mini {
      height: auto;
      line-height: normal;
    }

    ::v-deep .u-text {
      width: auto;
    }
  }

  .new-user {
    height: 88rpx;
    background: #F8F8F8;
    border-radius: 16rpx;
    padding: 0 20rpx;
  }

  .gap {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
  }

  .house-name {
    font-size: 26rpx;
    color: #333;
    font-weight: 800;
  }

  .house-info {
    font-size: 24rpx;
    font-weight: 500;
    color: #666;
  }

  .house-desc {
    font-size: 22rpx;
    color: #E47117;
  }

  .house-price {
    color: #DF0F0F;
    font-weight: 800;
    font-size: 24rpx;
  }
</style>